<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Store</title>
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/Store.css">
  <link rel="stylesheet" href="./css/footer.css">
</head>
<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="app" style="display:none">
    <el-container>
      <el-header>Store</el-header>
      <el-main>
        <div class="search-box">
          <el-input
            placeholder="请输入内容"
            clearable
            v-model="inputSearch">
            <el-button @click.native="seach" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="block">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="swe in spwipers">
              <img :src="swe.src" alt="">
            </mt-swipe-item>
          </mt-swipe>

        </div>
        <div class="goods"  ref="wrapper">
          <el-row :gutter="20">
              <el-col v-for="good in goods" :span="6">
                <div class="goo-img">
                  <img :src="good.img" alt="">
                </div>
                <div class="goo-title">{{good.name}}</div>
                <div class="goo-price">￥{{good.price}}</div>
              </el-col>
          </el-row>
          <el-button v-if="!AllLoaded" @click.nativ="loadmore" type="text" style="font-size:12px">加载更多</el-button>
          <div v-if="AllLoaded" style="font-size: 12px;color:#909399;margin:5px 0px">已全部加载完毕</div>
        </div>
      </el-main>
      <el-footer>
        <div class="footer">
          <ul>
            <li>
              <div class="foo-icon f-p1"></div>
              <div class="foo-name">商店</div>
            </li>
            <li>
              <div class="foo-icon f-p2"></div>
              <div class="foo-name">分类</div>
            </li>
            <li>
              <div class="foo-icon f-p3"></div>
              <div class="foo-name">玫瑰花</div>
            </li>
            <li>
              <div class="foo-icon f-p4"></div>
              <div class="foo-name">购物车</div>
            </li>
            <li>
              <div class="foo-icon f-p5"></div>
              <div class="foo-name">个人中心</div>
            </li>
          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/element-ui.js" charset="utf-8"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script type="text/javascript">
  var data = [
    {
      id: 2,
      img: "./images/goods/logo.png",
      price: 333.0,
      name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
    },
    {
      id: 2,
      img: "./images/goods/logo.png",
      price: 333.0,
      name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
    },
  ]
  new Vue({
    el: "#app",
    data: function() {
      return {
        wrapperHeight: 0,
        inputSearch: "",
        AllLoaded: false,
        spwipers: [
          {
            id:0,
            src: "./images/goods/goods1.jpg"
          },
          {
            id:2,
            src: "./images/goods/goods2.jpg"
          },
          {
            id:3,
            src: "./images/goods/goods3.jpg"
          }
        ],
        goods: [
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 1,
            img: "./images/goods/logo.png",
            price: 278.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          }
        ]
      }
    },
    methods: {
      loadmore(){
        console.log("loadmore");
        this.goods.push.apply(this.goods,data);
        console.log(data);
        console.log(this.goods);
        // axios.get("")
        // .then((res) => {
        //   this.goods.push(res.data);
        // })
        // .catch((err) => {
        //   //如果没有数据返回会被err捕捉的话，如果没有捕捉错误，在then里进行判断是否有数据返回
        // 全部记载完毕 or 加载出错？
        //   this.AllLoaded = true
        // })
      },
      seach(){
        if (this.inputSearch == "") {
          this.$messagebox.alert("搜索内容不能为空","提示");
        } else {
          console.log(this.inputSearch);
          // axios.post("  ",{
          //   data: inputSearch
          // })
          // .then((res)=>{
          //   console.log(res);
          // })
          // .catch((err) => {
          //   this.$messagebox.alert("搜索失败","提示");
          // })
        }
      }
    },
    mounted(){
      document.getElementById('app').style.display = 'block';
      document.getElementById('appLoading').style.display = 'none';
      // axios.get("")
      // .then((res) => {
      //   this.goods = res.data
      //   //如果你要写成接口请求数据，把 vue data里的goods数组清空。
      // })
      // .catch((err) => {
      //   this.$messagebox.alert("页面加载失败","提示");
      // })
    }
  })
</script>
</html>
